import React, { useState, useEffect } from 'react';


import { View, Text, Button , TextInput, TouchableOpacity, StyleSheet, PixelRatio, Alert, Image, Pressable, ImageBackground, FlatList } from 'react-native';
import { styles } from '../MyStyle';
import { MYBLACK, MYBLACK_Percent10, MyButton01, showToast } from '../UiComponents';

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';
import NativeLocalStorage from '../specs/NativeLocalStorage';

import { BackButton } from '../UiComponents';

// import Icon from 'react-native-vector-icons/FontAwesome';

import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
// import { Center } from 'native-base';

import { Center, Square, Circle } from 'native-base';

import { Loading } from '../Loading';
import { Flex } from '@ant-design/react-native';

import axios from 'axios';

import { HStack } from 'native-base';
import Modal from 'react-native-modal';




const styles2 = StyleSheet.create({
  text: {
    margin: 10,
    fontSize: 20,
    width:200,},


  hstack: {
    alignItems: 'flex-start', // 让 HStack 的高度与内容一致
    backgroundColor: 'rgba(0, 0, 0, 0.05)', // 黑色背景，透明度 5%
    padding: 10,
    borderRadius: 8, // 可选，给容器增加圆角
  },

  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start', // Center the box in the screen
  },
  box: {
    backgroundColor: '#00000000',
    flexDirection:"row",
    padding: 0, // Adjust the padding as needed
    borderRadius: 10,
  },


  input: {
    width: 374,
    height: 42,
    borderColor: '#ccc',
    borderWidth: 1,
    paddingLeft: 0,
    paddingRight:40,
    paddingTop:0,
    paddingBottom:0,
    // marginBottom: 20,
    borderRadius: 5,
  },

  inputContainer: {
    flexDirection: 'row', // 让输入框和图标横向排列
    alignItems: 'center', // 垂直居中对齐
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    left:20,
    // width: '100%',
  },

  iconContainer: {
    padding: 10, // 图标的点击区域
  },

  icon: {
    position: 'absolute',
    left:300,
    // right: 10, // 控制图标位置，距离输入框右侧 10px
    // top: '50%', // 垂直居中
    // transform: [{ translateY: -10 }], // 微调垂直位置
    width: 20,
    height: 20, // 设置图标的大小
  },



  item: {
    padding: 4,
    marginBottom: 10,
    backgroundColor: '#f9c2ff',
    alignItems:'center',
    borderRadius: 5,
  },

  image: {
    width: 180,
    height: 80,
    marginBottom: 10,
    borderRadius: 5,
  },

  modalStyle: {
    margin:0,
    position: 'absolute',
    top: 0,  // Position the modal at the top of the screen
    left: 0,
    right: 0,
  },
  modalContent: {
    width:300,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
  },

});




// 示例数据：30 个元素
const data = Array.from({ length: 300 }, (_, index) => ({
  id: index.toString(),
  title: `Item ${index + 1}`,
  imageUrl: 'https://via.placeholder.com/100',  // 使用占位符图片
}));

const numColumns = 5; // 每行显示 5 个项

export const FlatListExample = () => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles2.item}>
          <Image source={{ uri: item.imageUrl }} style={styles2.image} />
          <Text style={styles2.text}>{item.title}</Text>
        </View>
      )}
      keyExtractor={(item) => item.id}
      numColumns={numColumns} // 每行显示 5 个
      columnWrapperStyle={styles.row} // 设置每行的间隔和对齐方式
    />
  );
};


export const ModalExample = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={styles2.container}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal
        isVisible={isModalVisible}
        onBackdropPress={toggleModal}
        animationIn="slideInLeft"
        animationOut="slideOutLeft"
        backdropOpacity={0.1}
        style={styles2.modalStyle}
      >
        <View style={styles2.modalContent}>
          <Text style={styles2.text}>This is a Modal positioned at the top!</Text>
          <Button title="Close" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

